<script setup lang="ts">
import mapboxgl from "mapbox-gl";
import { onMounted } from "vue";
//引入语言包插件
import MapboxLanguage  from '@mapbox/mapbox-gl-language'

//设置token
mapboxgl.accessToken =
  "xxxxx";

onMounted(() => {
  const map = new mapboxgl.Map({
    //指定用来装载地图的DOM容器的id
    container: "map",
    //街道地图
    style: "mapbox://styles/mapbox/streets-v12",
    // //户外地图
    // style: "mapbox://styles/mapbox/outdoors-v12",
    // //灰白色地图
    // style: "mapbox://styles/mapbox/light-v11",
    // //暗黑色地图
    // style: "mapbox://styles/mapbox/dark-v11",
    // //卫星地图，无注记
    // style: "mapbox://styles/mapbox/satellite-v9",
    // //卫星地图，有注记
    // style: "mapbox://styles/mapbox/satellite-streets-v12",
    // //导航地图，白天
    // style: "mapbox://styles/mapbox/navigation-day-v1",
    // //导航地图，夜晚
    //style: "mapbox://styles/mapbox/navigation-night-v1",
   
    //指定默认视图中心点的经纬度
    center: [106.55, 29.57],
    //指定默认视图的放大层级
    zoom: 9,
  });

  //将当前Mapbox底图的语言设置为中文简体
  const language = new MapboxLanguage({ defaultLanguage: "zh-Hans" });
  map.addControl(language);

  //添加导航条
  const nav = new mapboxgl.NavigationControl();
  map.addControl(nav, 'top-right');
  //添加比例尺
  const scale = new mapboxgl.ScaleControl();
  map.addControl(scale, 'bottom-left');

  //添加全屏按钮
  const fullScreen = new mapboxgl.FullscreenControl();
  map.addControl(fullScreen, "top-right");

  //默认样式加载完成后，添加图层
  map.on('style.load', () => {
    map.addSource('mapbox-dem', {
        'type': 'raster-dem',
        //这里加载mapbox官方提供的地形数据地址，可替换为自己的地形切片地址
        'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
        'tileSize': 512,
        'maxzoom': 14
    });
    map.setTerrain({ 
      'source': 'mapbox-dem', 
      //地形夸张比例，越大，起伏效果越明显
      'exaggeration': 1.5 
    });
  });
});
</script>

<template>
  <div id="map" class="map"></div>
</template>

<style>
.map {
  flex:1;
}
</style>
